<script setup lang="ts">
import {onBeforeUnmount, onUpdated, ref, shallowRef, watch} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const $props = defineProps(["modelValue","onUpdate:modelValue"]);
const $emits = defineEmits(["update:model-value"]);

// 内容 HTML
const valueHtml = ref($props.modelValue);

const toolbarConfig = {
    excludeKeys:["group-video"]
}
onUpdated(()=>{
    valueHtml.value = $props.modelValue;
})
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF:{
        uploadImage:{
            server: '/yuma/api/upload2',
            fieldName:"yumaImg",
            // onSuccess(file: File, res: any) {
            //     // TS 语法
            //     // onSuccess(file, res) {          // JS 语法
            //     console.log(`${file.name} 上传成功`, res)
            // }
        }
    }
}
watch(valueHtml,(newValue)=>{
    $emits("update:model-value",newValue);
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
defineOptions({
    name:"Editor"
})
</script>

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            mode="default"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="handleCreated"
        />
    </div>
</template>

<style scoped lang="less">

</style>